<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>
    <body>

        <div id="root">
            <!--遍历数组-->
            <h2>人员列表</h2>
            <ul>
                <li v-for="(p,index) in persons" :key="index">
                    {{p.name}}-{{p.age}}----{{index}}
                </li>
            </ul>
            <!--遍历对象-->
            <h2>这是汽车信息</h2>
            <ul>
                <li v-for="(v,key) in car" :key="key">
                  {{key}}:{{v}}
                </li>
            </ul>

            <!--遍历字符串-->
            <h2>hello</h2>
            <ul>
                <li v-for="(char,index) of str" :key="index">
                 {{char}}-{{index}}
                </li>
            </ul>


            <!--测试遍历指定次数-->
            <h2>测试遍历指定次数</h2>
            <ul>
                <li v-for="(number,index) of 5" :key="index">
                    {{number}}-{{index}}
                </li>
            </ul>

        </div>


        <script type="text/javascript">
            Vue.config.productionTip = false;
            new Vue({
                el: '#root',
                data: {
                    persons:[
                        {id:'00',name:'Bob',age:'22'},
                        {id:'01',name:'Lily',age:'23'},
                        {id:'02',name:'Jenny',age:'24'},
                    ],
                    car:{
                        name:'aodiA8',
                        price:'70w',
                        color:'white'
                    },
                    str:'hello'
                },
                methods:{
                    //this.persons[1].name.toUpperCase()
                }
            })
        </script>

    </body>
</html>